<template>
  <div class="container">
    <el-card class="personal-card box-card">
      <div slot="header" class="card-header"> 个人中心 </div>
      <div class="personal-info">
        <el-upload
          class="avatar-uploader"
          action
          :http-request="httpRequest"
          name="image"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
        >
          <el-avatar class="avatar" :src="userInfo.image" size="300"></el-avatar>
        </el-upload>
        <div class="info">
          <h2>{{ userInfo.name }}</h2>
          <h2>余额：{{ userInfo.rmb }}</h2>
          <h2>注册时间：{{ userInfo.create_time }}</h2>
        </div>
      </div>
      <el-divider></el-divider>
      <el-tabs v-model="activeTab" class="tab-container">
        <el-tab-pane label="基本信息" name="basic">
          <div class="tab-content">
            <div>
              <p><span>用户名：</span>{{ userInfo.name }}</p>
              <p><span>帐号：</span>{{ userInfo.uid }}</p>
              <p><span>性别：</span>{{ '男' }}</p>
            </div>
            <el-button v-show="false" type="primary">编辑</el-button>
          </div>
          <el-button type="primary" @click="clickEdit">编辑</el-button>
        </el-tab-pane>
      </el-tabs>

      <el-dialog title="编辑" v-model="dialogVisible">
        <div>
          <h3 class="edit-txt" s>修改密码：</h3>
          <el-input v-model="password" placeholder="修改密码"></el-input>

          <h3 class="edit-txt">修改余额：</h3>
          <el-input v-model="rmb" placeholder="修改余额："></el-input>
          <h3 class="edit-txt">修改昵称：</h3>
          <el-input v-model="name" placeholder="修改昵称："></el-input>
          <div class="submit">
            <el-button type="primary" @click="submit"> 保存</el-button>
          </div>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script setup>
  import { onMounted, reactive, ref } from 'vue'
  import { useUserStore } from '/@/store/modules/user'
  import { upload } from '/@/api/person/person.ts'
  import { updateUser } from '/@/api/user-manager/user.ts'
  import { ElMessage } from 'element-plus'

  const activeTab = ref('basic')
  const imageUrl = ref('')
  const userStore = useUserStore()
  const userInfo = userStore.getUserInfo
  const customHeaders = reactive({
    'Content-Type': 'multipart/form-data',
  })
  const imageType = reactive({
    user_id: userStore.getUserInfo.uid,
    tid: 1,
    info: '用户',
  })
  const data = reactive({
    imageType: JSON.stringify(imageType),
  })
  const password = ref(userInfo.password)
  const rmb = ref(userInfo.rmb)
  const name = ref(userInfo.name)
  const dialogVisible = ref(false)
  const actinoUrl = '/basic-api/file/upload'
  onMounted(() => {})

  const clickEdit = () => {
    dialogVisible.value = true
  }

  const handleAvatarSuccess = (response, uploadFile) => {
    imageUrl.value = URL.createObjectURL(uploadFile.raw)
    userStore.getUserInfoAction()
  }

  const handleBeforeUpload = (file) => {
    return new Promise((resolve, reject) => {
      const reader = new FileReader()
      reader.onload = (event) => {
        const dataUrl = event.target.result
        const blob = this.dataURLtoBlob(dataUrl)
        const newFile = new File([blob], file.name, { type: file.type })
        resolve(newFile)
      }
      reader.onerror = (error) => {
        reject(error)
      }
      reader.readAsDataURL(file)
    })
  }

  const httpRequest = (params) => {
    const form = new FormData()
    form.append('image', params.file)
    form.append('imageType', new Blob([data.imageType], { type: 'application/json' }))
    upload(form).then(() => {
      userStore.getUserInfoAction()
    })
  }

  const submit = () => {
    const userInfo = userStore.getUserInfo
    const data = {
      ...userInfo,
      password: password.value,
      rmb: rmb.value,
      name: name.value,
    }
    updateUser([data]).then((res) => {})
    dialogVisible.value = false
    ElMessage({
      message: '修改成功',
      type: 'success',
    })
    setTimeout(() => {
      location.reload()
    }, 2000);
  }
</script>

<style lang="scss" scoped>
  .container {
    margin: 0 auto;
  }

  .box-card {
    margin: 10px;
  }

  .personal-center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 20px;
  }

  .personal-card {
    .card-header {
      text-align: center;
      font-size: 24px;
      font-weight: bold;
      padding: 15px 0;
    }

    .personal-info {
      display: flex;
      align-items: center;

      .avatar {
        margin-right: 20px;
        width: 100px;
        height: 100px;
      }

      .info {
        h2 {
          font-size: 20px;
          margin: 0 0 10px 0;
        }

        p {
          margin: 0;
        }
      }
    }

    .tab-container {
      margin-top: 20px;

      .tab-content {
        padding: 20px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        p {
          margin: 10px 0;

          span {
            font-weight: bold;
          }
        }
      }
    }
  }
  .edit-txt {
    margin-top: 10px;
  }
  .submit {
    display: flex;
    flex-direction: column-reverse;
    margin-top: 10px;
  }
</style>